<template>
	<view class="page">
		<hx-navbar title="订单专区" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="ytx"></view>
		<view class="order-nav flex align-center justify-between">
			<view class="item" :class="{active: state === 0}" @click="tabClick(0)"> 全部订单 </view>
			<view class="item" :class="{active: state === 1}" @click="tabClick(1)"> 待支付 </view>
			<view class="item" :class="{active: state === 3}" @click="tabClick(3)"> 待收货 </view>
			<view class="item" :class="{active: state === 4}" @click="tabClick(4)"> 待评价 </view>
			<view class="item" :class="{active: state === 5}" @click="tabClick(5)"> 退款 </view>
		</view>

		<view class="">
			<view class="goods">
				<view class="goods-top flex justify-between align-center">
					<view class="flex">
						<view class="dingdanicon">
							<image src="../../static/imgs/dingdanicon1.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="store-name text-bold">
								果果园苗木店铺<i class="fa fa-angle-right" aria-hidden="true"></i> 
							</view>
							<view class="store-site">
								<i class="fa fa-map-marker" aria-hidden="true"></i>江苏省宿迁市沐阳县新河镇
							</view>
						</view>
					</view>
					<view class="store-name text-bold">
						已完成
					</view>
				</view>
				<view class="goods-content flex">
					<view class="">
						<image src="../../static/imgs/dingdanimg1.png" mode="aspectFill"></image>
					</view>
					<view class="" style="flex: 1;">
						<view class="name text-bold">
							正宗北京平谷大桃12个
						</view>
						<view class="text-right text-bold">
							￥112.6
						</view>
						<view class="text-right" style="color: #666666;">
							共1件
						</view>
					</view>
				</view>
				<view class="goods-bottom">
						<view class="flex align-center">
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">取消订单</button>
						<!-- 	<button type="default" size="mini" @tap="toReceipt(item.id)">再来一单</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">客服介入</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">联系商家</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">申请退款</button>
							<button type="default" size="mini" class="payment" @tap.stop="wechatPay(item.id)">去支付</button>
							<button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">评价</button>
							<button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">确认收货</button> -->
							<button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">去评价</button>
						</view>
				</view>
			</view>
			<view class="goods">
				<view class="goods-top flex justify-between align-center">
					<view class="flex">
						<view class="dingdanicon">
							<image src="../../static/imgs/dingdanicon2.png" mode="aspectFill"></image>
						</view>
						<view class="">
							<view class="store-name text-bold">
								果果园苗木店铺<i class="fa fa-angle-right" aria-hidden="true"></i> 
							</view>
							<view class="store-site">
								<i class="fa fa-map-marker" aria-hidden="true"></i>江苏省宿迁市沐阳县新河镇
							</view>
						</view>
					</view>
					<view class="store-name text-bold">
						待支付
					</view>
				</view>
				<view class="goods-content flex">
					<view class="">
						<image src="../../static/imgs/dingdanimg2.png" mode="aspectFill"></image>
					</view>
					<view class="" style="flex: 1;">
						<view class="name text-bold">
							清爽多汁水蜜桃13个
						</view>
						<view class="text-right text-bold">
							￥112.6
						</view>
						<view class="text-right" style="color: #666666;">
							共1件
						</view>
					</view>
				</view>
				<view class="goods-bottom">
						<view class="flex align-center">
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">取消订单</button>
						<!-- 	<button type="default" size="mini" @tap="toReceipt(item.id)">再来一单</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">客服介入</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">联系商家</button>
							<button type="default" size="mini" @tap.stop="toCancel(item.id)">申请退款</button>
							<button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">评价</button>
							<button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">确认收货</button> -->
							<button type="default" size="mini" class="payment" @tap.stop="wechatPay(item.id)">去支付</button>
							<!-- <button type="default" size="mini" class="evaluate" @tap="toReceipt(item.id)">去评价</button> -->
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import 'static/css/font-awesome.min.css';
	export default {
	    data() {
	        return {
	            state: 0,
	            list: []
	        }
	    },
	    onLoad(options) {
			
		},
		methods: {
			//顶部tab点击
			tabClick(index) {
			    this.state = index;
			    this._initData(true)
			},
		}
	}
</script>

<style>
	.order-nav {
		background-color: #FFFFFF;
		height: 80rpx;
		line-height: 79rpx;
		padding: 0rpx 30rpx 0 20rpx;
		margin-bottom: 20rpx;
		position: sticky;
	}

	.order-nav .item {
		font-size: 32rpx;
		padding: 0rpx 2rpx;
		position: relative;
	}

	.order-nav .item.active {
		font-weight: bold;
	}

	.order-nav .item.active::after {
		content: '';
		display: block;
		width: 30%;
		border-bottom: 4rpx solid #26C594;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
	}

	.ytx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.goods{
		margin: 0 20rpx;
		padding: 25rpx 20rpx;
		border-radius: 20rpx;
	}
.goods-top .dingdanicon{
	margin-right: 25rpx;
}
	.goods-top .dingdanicon image {
		width: 74rpx;
		height: 74rpx;
		border-radius: 20rpx;
	}
	.goods-top .store-name{
		font-size: 30rpx;
		
	}
	.goods-top .store-name i{
		color: #000;
		margin-left: 10rpx;
	}
	.goods-top .store-site{
		margin-top: 5rpx;
		font-size: 20rpx;
		color: #666666;
	}
	.goods-top .store-site i{
		margin-right: 10rpx;
	}
	.goods-content{
		margin-top: 40rpx;
	}
	.goods-content image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 15rpx;
		margin-right: 28rpx;
	}
	.goods-content .name{
		font-size: 26rpx;
	}
	.goods-content .text-right.text-bold{
		margin: 30rpx 0 10rpx 0;
	}
	.goods-content .text-right{
		font-size: 24rpx;
	}
	.goods-bottom {
		display: flex;
		flex-direction: row-reverse;
	}
	.goods-bottom button {
		width: 170rpx;
		height: 67rpx;
		line-height: 65rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
		padding: 0 25rpx;
		border: 0;
		font-size: 24rpx;
		border: 2rpx #999 solid;
		background-color: #fff;
	}
	.goods-bottom .evaluate{
		border: 2rpx #26C594 solid;
		color: #26C594;
	}
	.goods-bottom .payment{
		border: 0rpx #26C594 solid;
		color: #fff;
		background-color: #26C594;
	}
	
</style>
